<!--
  @created by qfkong on 2019-12-5 09:36:02
  @updated by
  @description jobFlowGraph
-->
<div class="taskMonitorGraph" style="position: relative; padding: 0;">
  <yu-button-group style="position: absolute; z-index: 10;right: 35px; margin-top: 108px; transition: all 0.3s;"
    :style="{'margin-top': showTabsTitle ? '108px' : '69px'}">
    <yu-button size="mini" type="primary" @click="setAllPreValue" v-if="!isHistory">全部预置</yu-button>
    <yu-button size="mini" type="primary" @click="cancelAllPreValue" v-if="!isHistory">取消预置</yu-button>
    <yu-button size="mini" type="primary" @click="autoLayout">自动布局</yu-button>
  </yu-button-group>
  <div class="page-content-box flex-box">
    <div class="work-base-box flex-box" :class="{'show' : showWorkBaseForm}">
      <div class="work-base-content flex-f1">
        <yu-xform ref="refWorkBaseForm" v-model="workBaseFormData" label-width="140px" :disabled="true">
          <yu-xform-group :column="1">
            <yu-xform-item label="应用系统名称" ctype="input" name="appName"></yu-xform-item>
            <yu-xform-item label="任务名称" ctype="input" name="groupName" :hidden="isHistory"></yu-xform-item>
            <yu-xform-item label="任务名称" ctype="input" name="taskName" :hidden="!isHistory"></yu-xform-item>
            <yu-xform-item label="任务号" ctype="input" name="cycleNo"></yu-xform-item>
            <yu-xform-item label="任务周期时点" ctype="input" name="cyclePnt"></yu-xform-item>
            <yu-xform-item label="任务状态" ctype="select" name="runState" data-code="USE_TASK_RUN_STATE"></yu-xform-item>
            <yu-xform-item label="作业总数" ctype="input" name="estCnt" :hidden="islock"></yu-xform-item>
            <yu-xform-item label="执行中作业数" ctype="input" name="execCnt" :hidden="islock"></yu-xform-item>
            <yu-xform-item label="成功作业数" ctype="input" name="successCnt" :hidden="islock"> </yu-xform-item>
            <yu-xform-item label="失败作业数" ctype="input" name="failedCnt" :hidden="islock"></yu-xform-item>
            <yu-xform-item label="调试/运行" ctype="select" name="runMode" data-code="USE_TASK_RUN_MODE" :hidden="islock"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
        <div class="change-status" v-if="!isShow">
          <i class="el-icon-caret-left icon" @click="changecondTypeFn"></i>
          <span>切换到<i>{{runModeValue}}</i>状态</span>
        </div>
        <div style="float:right;" v-show="stepValueShow">
          <label style="font-size: 14px;color:#48576a;">设置步长</label>
          <yu-input v-model="stepValue" placeholder="请设置步长" v-show="stepValueShow" style="width: 235px"></yu-input>
          <yu-button type="info" size="mini" @click="setStepValueFn">确定</yu-button>
        </div>
      </div>
    </div>
	<div class="flex-center">
	  <i :class="['switch-icon', showWorkBaseForm ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right']" @click="showWorkBaseForm = !showWorkBaseForm"></i>
	</div>
    <div class="work-flow-box flex-f1">
      <el-row style="margin: 10px 0">
        <el-col :span="9" style="text-align: right;">
          <label class="taskLabel">刷新时间：{{ currentTime }}</label>
        </el-col>
        <el-col :span="3" style="text-align: right">
          <label class="taskLabel">刷新频率：</label>
        </el-col>
        <el-col :span="5">
          <yu-xselect size="small" :options="timeOptions" v-model="timerDelay" @change="frequencyChangeFn" :clearable="false"></yu-xselect>
        </el-col>
        <el-col :span="2">
          <yu-button-group style="margin-left: 5px">
            <yu-button type="primary" size="small" @click="btnRefreshWorkFlowFn">刷新</yu-button>
          </yu-button-group>
        </el-col>
      </el-row>
      <i :class="['switch-icon', showTabsTitle ? 'el-icon-yx-arrow-up2' : 'el-icon-yx-arrow-down2']" @click="showTabsTitle = !showTabsTitle"></i>
      <yu-tabs :class="{'show-title' : showTabsTitle}" type="border-card" v-model="activeName" @tab-click="btnRefreshWorkFlowFn"
        @tab-remove="tabRemove">
        <yu-tab-pane v-for="(item, index) in workflowArr" :label="item.workName" :key="index" :name="index+''" :closable="index > 0">
          <yu-workflow ref="refWorkflow" @init="initGraph(index)" @celldblclick="celldblclickFn" :show-toolbar="false" :lock="isHistory"
            :show-sidebar="false" :height="height" work-type="workflow" @overlayclick="overlayclickFn">
          </yu-workflow>
        </yu-tab-pane>
      </yu-tabs>
    </div>
  </div>
  <yu-xdialog title="设置预置返回值" width="400px" height="100px" :visible.sync="dialogVisible">
    <yu-xform ref="" v-model="preValueFormdata" label-width="100px">
      <yu-xform-group :column="1">
        <yu-xform-item label="预置返回值" ctype="input" name="returnValue"></yu-xform-item>
      </yu-xform-group>
      <div class="button-group" style="text-align: center">
        <el-button type="primary" @click="setPreValue">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </yu-xform>
  </yu-xdialog>
  <yu-xdialog title="修改返回值" width="450px" height="140px" :visible.sync="showModifyRetValue">
    <yu-xform ref="" v-model="modifyRetValue" label-width="70px">
      <p style="margin-bottom: 15px; text-align: center; font-size: 12px;">请输入0 ~ 255之间的整数（0 ~ {{ successMaxRetValue }}为成功，{{
        successMaxRetValue + 1 }} ~ 255 为失败）</p>
      <yu-xform-group :column="1">
        <yu-xform-item label="返回值" ctype="num" name="returnValue"></yu-xform-item>
      </yu-xform-group>
      <div class="button-group" style="text-align: center">
        <el-button type="primary" @click="setModifyRetValuee">保存</el-button>
        <el-button @click="showModifyRetValue = false">取消</el-button>
      </div>
    </yu-xform>
  </yu-xdialog>
  <yu-xdialog title="作业信息" :visible.sync="visible" width="75%">
    <yu-tabs type="border-card" v-model="tabsActiveName">
      <yu-tab-pane label="作业基本信息">
        <yu-xform ref="refBaseForm" class="formHeight" v-model="baseFormData" :disabled="true" label-width="140px">
          <yu-xform-group>
            <yu-xform-item label="作业类型名称" ctype="select" data-code="USE_TASK_JOB_TYPE" name="typeCode"></yu-xform-item>
            <yu-xform-item label="作业代码" ctype="input" name="actionCode"></yu-xform-item>
            <yu-xform-item label="作业名称" ctype="input" name="actionName"></yu-xform-item>
            <yu-xform-item label="作业编号" ctype="input" name="sequence"></yu-xform-item>
            <yu-xform-item label="返回值" ctype="input" name="retValue"></yu-xform-item>
            <yu-xform-item label="集群代理名称" ctype="select" name="agentName" :options="agentIds"></yu-xform-item>
            <yu-tooltip class="item" effect="light" content="执行内容(atr)：执行内容变量替换前" placement="top-start">
              <yu-xform-item label="执行内容(atr)" name="actionExec" ctype="input" :disabled="true"></yu-xform-item>
            </yu-tooltip>
            <yu-tooltip class="item" effect="light" content="执行位置(atr)：执行位置变量替换前" placement="top-start">
              <yu-xform-item label="执行位置(atr)" name="actionLoc" ctype="input" :disabled="true"></yu-xform-item>
            </yu-tooltip>
            <yu-tooltip class="item" effect="light" content="执行内容(wrk)：执行内容变量替换后" placement="top-start">
              <yu-xform-item label="执行内容(wrk)" name="actionExecWrk" ctype="input" :disabled="true" v-if="!isHistory"></yu-xform-item>
            </yu-tooltip>
            <yu-tooltip class="item" effect="light" content="执行位置(wrk)：执行位置变量替换后" placement="top-start">
              <yu-xform-item label="执行位置(wrk)" name="actionLocWrk" ctype="input" :disabled="true" v-if="!isHistory"></yu-xform-item>
            </yu-tooltip>
            <yu-xform-item label="执行结果" name="jobStateStr" ctype="input" data-code="USE_JOB_RUN_STATE"></yu-xform-item>
            <yu-xform-item label="开始时间" name="beginTimeStr" ctype="input"></yu-xform-item>
            <yu-xform-item label="结束时间" name="endTimeStr" ctype="input"></yu-xform-item>
            <yu-xform-item label="历史平均执行时长" name="hisAvgTimeStr" ctype="input"></yu-xform-item>
            <yu-xform-item label="作业优先级" name="actionPrior" ctype="num"></yu-xform-item>
            <yu-xform-item label="错误信息" name="errorMsg" ctype="input"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
      </yu-tab-pane>
      <yu-tab-pane label="作业参数信息">
        <yu-xtable selection-type="checkbox" ref="refTableExec" :pageable="false" height="410px" :data="wftParList">
          <yu-xtable-column prop="paramName" label="参数名称">
          </yu-xtable-column>
          <yu-xtable-column prop="paramValue" label="参数值"></yu-xtable-column>
          <yu-xtable-column prop="remark" label="备注">
          </yu-xtable-column>
        </yu-xtable>
      </yu-tab-pane>
      <yu-tab-pane label="作业日志信息">
        <yu-input type="textarea" :rows="4" class="forminput" :account="true" placeholder="日志信息" v-model="logText" readonly></yu-input>
      </yu-tab-pane>
      <yu-tab-pane label="作业事件信息">
        <yu-xtable row-number selection-type="checkbox" ref="refTableEvents" :pageable="false" :data="useEventLogList" height="410px">
          <yu-xtable-column prop="eventName" ctype="input" label="事件名称">
          </yu-xtable-column>
          <yu-xtable-column ctype="select" prop="relation" label="关联关系" data-code="USE_EVT_REL_TYPE">
          </yu-xtable-column>
          <yu-xtable-column ctype="input" prop="eventAppname" label="事件系统">
          </yu-xtable-column>
          <yu-xtable-column prop="recordTimeStr" ctype="input" label="事件产生时间" :disabled="true"></yu-xtable-column>
          <yu-xtable-column ctype="input" prop="reamrk" label="备注">
          </yu-xtable-column>
        </yu-xtable>
      </yu-tab-pane>
    </yu-tabs>
    <div class="yu-grpButton">
      <yu-button type="primary" @click="visible = false">关闭</yu-button>
    </div>
  </yu-xdialog>
</div>
<style type="text/css">
  .formHeight {
    height: 410px;
    overflow-y: auto;
  }

  .forminput textarea {
    height: 410px;
  }
  .flex-center{
  	      display: flex;
  	      align-items: center;
  }
  .work-flow-box{
  	  width: calc( 100% - 20px );
  }
  .switch-icon{
	  cursor: pointer;
  }
</style>
